<template>
	<!-- 分享 -->
	<view class="share-container">
		<nav-bar class="view-bg" :title="i18n.share.title" @_back="_back" />
		<view class="container view-bg">
			<view class="main-color title bold">
				<text>{{i18n.share.friends}}</text>
			</view>
			<view class="sub-title">
				<text>{{i18n.share.waelth}}</text>
			</view>
			<view class="qr-image">
				<tki-qrcode :icon="avatar" ref="qrcode" @result="resultQr" :val="link + '?code=' + invitation_code"
				 :showLoading="false" :loadMake="true" :size="320" />
			</view>
			<view class="sub-title">
				<text>{{i18n.share.code + ':'}}</text>
				<image @click="_copy(invitation_code)" class="copy-image" src="../../static/images/icon/copy.png" mode="widthFix"></image>
			</view>
			<view class="btn bold">
				<text class="white-text">{{invitation_code}}</text>
			</view>
			<view class="sub-title">
				<text>{{i18n.share.link + ':'}}</text>
				<image @click="_copy(link + '?code=' + invitation_code)" class="copy-image" src="../../static/images/icon/copy.png" mode="widthFix"></image>
			</view>
			<view class="btn link">
				<text class="white-text">{{link}}</text>
			</view>
			<view class="dis-between">
				<view class="submit-btn main-bg bold" @click="posterClick">
					<text class="white-text">{{i18n.share.poster}}</text>
				</view>
				<view class="submit-btn bold main-color" @click="saveqr">
					<text>{{i18n.share.saveCode}}</text>
				</view>
			</view>
		</view>
		<view class="poster-container" id="poster-container" :style="'height:' + Height + 'px; top: -' + Height + 'px'">
			<img class="bg-image" src="../../static/images/ui/share-bg.png" />
			<view class="poster-box">
				<view class="top-title text-align">
					<text>NAME NAME</text>
				</view>
				<view class="main-color main-top-title text-align bold">
					<text>SHOCK ONLINE</text>
				</view>
				<view class="top-sub-title text-align">
					<text>//The world's leading digital platform//</text>
				</view>
				<view class="bottom-sub-title text-align">
					<text>Let wealth be free</text>
				</view>
				<view class="main-color main-bottom-title text-align">
					<text>SAFETY AND STABILITY</text>
				</view>
				<view class="bottom-box dis-between">
					<view class="left-box">
						<view class="name-text">
							<text>Name name</text>
						</view>
						<view class="platform-text">
							<text>Platform security and stability</text>
						</view>
					</view>
					<view class="right-box">
						<image class="poster-qr-image" :src="qrUrl" mode="widthFix"></image>
					</view>

				</view>
			</view>
		</view>
		<u-mask :show="tipsShow" @click="tipsShow = false">
			<view class="share-container-view">
				<view class="tips-title bold">
					<text>{{i18n.share.longOut}}</text>
				</view>
				<img class="poster-iamges" :src="base64" />
			</view>
		</u-mask>
<!-- 		<tips-popup ref="tips">
			<view class="tips-container">
				<view class="tips-title bold">
					<text>{{i18n.share.longOut}}</text>
				</view>
				<img class="poster-iamges" :src="base64" />
			</view>
		</tips-popup> -->
		<tips-popup ref="tipsQr">
			<view class="tips-container">
				<view class="tips-title bold">
					<text>{{i18n.share.longOut}}</text>
				</view>
				<img class="qr-iamges" :src="qrUrl" />
			</view>
		</tips-popup>
	</view>
</template>

<script>
	import mixin from '@/utils/minix.js'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import {
		copy
	} from '@/utils/util.js'
	import {
		base64ToPath
	} from '@/js_sdk/image-tools/index.js'
	import html2canvas from 'html2canvas'; // 引入 html2canvas
	import { mapGetters} from 'vuex'
	export default {
		mixins: [mixin],
		components: {
			TipsPopup
		},
		data() {
			return {
				code: '168888',
				link: 'app.shikecm.com/#/pages/login/register',
				qrUrl: '',
				Height: 0,
				base64: '',
				tipsShow: false
			}
		},
		computed: {
			...mapGetters(['avatar', 'invitation_code']),
			i18n() {
				return this.$t('message');
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.Height = res.windowHeight;
				}
			})
		},
		methods: {
			_copy(text) {
				copy(text, this.i18n.common.copySuccess, this.i18n.common.copyFail)
			},
			saveqr() {
				// #ifndef H5
				this.$refs.qrcode._saveCode()
				// #endif

				// #ifdef H5
				let en = window.navigator.userAgent.toLowerCase()
				// 匹配en中是否含有MicroMessenger字符串
				if (en.match(/MicroMessenger/i) == 'micromessenger') {
					this.$refs.tipsQr.open('fall');
				}
				if (en.match(/MicroMessenger/i) != 'micromessenger') {
					base64ToPath(this.qrUrl).then(res => {
						let oA = document.createElement("a");
						oA.download = " "; // 设置下载的文件名，默认是'下载'  
						oA.href = res;
						oA.click();
						document.body.appendChild(oA);
						oA.remove(); // 下载之后把创建的元素删除 
					}).catch((error) => {
						console.log(error)
					})
				}
				// #endif
			},
			resultQr(val) {
				this.qrUrl = val;
			},

			toImg() {
				let dom = document.getElementById('poster-container'); // 获取dom元素
				html2canvas(dom, {
					width: dom.clientWidth, //dom 原始宽度
					height: dom.clientHeight,
					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
					scrollX: 0,
					useCORS: true, //支持跨域，但好像没什么用
				}).then((canvas) => {
					this.base64 = canvas.toDataURL('image/png', 1);
				});
			},

			async posterClick() {
				await this.toImg();
				this.tipsShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
	}

	.share-container {
		height: 100%;

		.poster-container {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
			color: #fff;

			.bg-image {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1;
			}

			.poster-box {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 2;

				.top-title {
					font-size: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
					margin: 112rpx auto 80rpx;
				}

				.main-top-title {
					font-size: 88rpx;
					height: 88rpx;
					line-height: 88rpx;
				}

				.top-sub-title {
					font-size: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					margin: 40rpx auto 112rpx;
				}

				.bottom-sub-title {
					font-size: 28rpx;
					height: 28rpx;
					line-height: 28rpx;
					margin-bottom: 24rpx;
				}

				.main-bottom-title {
					font-size: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
				}

				.bottom-box {
					position: absolute;
					bottom: 50rpx;
					left: 0;
					width: 100%;
					padding: 0 30rpx;
					align-items: flex-end;

					.left-box {
						font-size: 28rpx;

						.name-text {
							line-height: 28rpx;
							margin-bottom: 30rpx;
						}

						.platform-text {
							color: #cacaca;
							line-height: 28rpx;
						}
					}

					.right-box {
						width: 260rpx;
						height: 260rpx;
						padding: 2rpx;
						background-color: #fff;

						.poster-qr-image {
							width: 256rpx;
						}
					}
				}
			}
		}
		
		.share-container-view {
			width: 100%;
			height: 100%;
			position: relative;
			color: #fff;
			font-size: 32rpx;
			
			.poster-iamges {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
			}
			
			.tips-title {
				width: 100%;
				text-align: center;
				position: absolute;
				top: 20rpx;
				z-index: 1;
			}
		}
		
		.tips-container {
			color: #fff;
			font-size: 32rpx;

			.poster-iamges {
				width: 500rpx;
				height: 888rpx;
				margin-top: 40rpx;
			}

			.qr-iamges {
				width: 260rpx;
				height: 260rpx;
				margin-top: 40rpx;
			}

		}

		.container {
			padding-top: 60rpx;
			text-align: center;
			color: rgba(255, 255, 255, .54);
			font-size: 32rpx;
			height: calc(100% - 148rpx);

			.title {
				font-size: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin-bottom: 24rpx;
			}

			.sub-title {
				height: 32rpx;
				line-height: 32rpx;
			}

			.qr-image {
				width: 340rpx;
				height: 340rpx;
				padding-top: 10rpx;
				background-color: #fff;
				margin: 40rpx auto 60rpx;
			}

			.copy-image {
				width: 26rpx;
				margin-left: 20rpx;
			}

			.btn {
				width: 274rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background-color: #21273f;
				border-radius: 35rpx;
				padding: 0 48rpx;
				margin: 20rpx auto 40rpx;

				&.link {
					width: 600rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}

			.submit-btn {
				width: 335rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;

				&:last-child {
					border: solid 1px #eec67f;
				}
			}
		}
	}
</style>
